<template>
  <div class="item">
   <h3>{{title}}</h3>
    <slot :data="games">模式默认的插槽内容</slot>
  </div>
</template>

<script>
export default {
  name: "Item",
  props:["title"],
  data(){
    return {
      games:["红色警戒","穿越火线","劲舞团","超级玛丽"]
    }
  }
}
</script>

<style scoped lang="less">
  .item{
    h3{
      background: orange;
    }
    width: 10%;
    height: 300px;
    text-align: center;
    background: aqua;
    ul{
      li{
        list-style: none;
        margin: 5px 0;
      }
      margin: 0;
      padding: 0;
    }
    video{
      width: 100%;
    }
    img{
      width: 100%;
    }
    .footer{
      display: flex;
      justify-content: space-around;
      margin-top: 10px;
      flex-wrap: wrap;
      h4{
        width: 100%;
      }
    }
  }
</style>
